<template>
  <div>
    <div>
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="4">
              <div>
                <h1 style="font-size: 30px;font-family: 'Microsoft YaHei';margin-left: 10px">{{ this.$route.params.uN }}</h1>
              </div>
            </el-col>
            <el-col :span="12">
              <div>
                <el-tag v-if="universityInfo.is211 == 1" style="margin-left: 5px;margin-top: 10px" >211</el-tag>
                <el-tag v-if="universityInfo.is985 == 1" style="margin-left: 5px;margin-top: 10px">985</el-tag>
                <el-tag v-if="universityInfo.isExcellent == 1" style="margin-left: 5px;margin-top: 10px">卓越</el-tag>
              </div>
            </el-col>
          </el-row>
        </el-header>
        <el-main>

          <el-row style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);display: flex;flex-direction: row">
                <el-col :span="4">
                  <el-image
                      style="width: 200px; height: 200px;margin-left: 20px;margin-top: 30px"
                      :src="this.universityInfo.logoUrl"
                      :fit="'fill'">
                  </el-image>
                </el-col>
                <el-col :span="12" style="display: flex;flex-direction: row;margin-left: 10px">
                  <div>
                    <el-descriptions class="margin-top" :column="3" style="margin-top: 20px">
                      <el-descriptions-item label="国际代码">
                        {{ this.universityInfo.globalId }}
                      </el-descriptions-item>
                      <el-descriptions-item label="所在省市">
                        {{ this.universityInfo.location }}
                      </el-descriptions-item>
                      <el-descriptions-item label="院校隶属">
                        {{ this.universityInfo.admin }}
                      </el-descriptions-item>
                    </el-descriptions>
                    <el-divider></el-divider>
                    <el-descriptions class="margin-top" :column="3">
                      <el-descriptions-item label="院校层次">
                        {{ this.universityInfo.rank }}
                      </el-descriptions-item>
                      <el-descriptions-item label="院校类型">
                        {{ this.universityInfo.type }}
                      </el-descriptions-item>
                      <el-descriptions-item label="硕士点">
                        {{ this.universityInfo.masNum }}
                      </el-descriptions-item>
                    </el-descriptions>
                    <el-divider style="margin-top: 5px"></el-divider>
                    <el-descriptions class="margin-top" :column="3">
                      <el-descriptions-item label="招办电话">
                        {{ this.universityInfo.phone }}
                      </el-descriptions-item>
                      <el-descriptions-item label="高校地址">
                        {{ this.universityInfo.address }}
                      </el-descriptions-item>
                      <el-descriptions-item label="博士点">
                        {{ this.universityInfo.docNum }}
                      </el-descriptions-item>
                    </el-descriptions>
                    <el-divider style="margin-top: 5px"></el-divider>
                  </div>
                </el-col>
          </el-row>

          <el-divider style="width: 1500px"></el-divider>

          <el-row style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
            <el-row :gutter="20"
                     style="margin-top: 10px;
                            display: flex;
                            flex-direction: row">
              <el-col :span="12" :offset="1" style="margin-top:10px">
                <span style="font-family: 'PingFang SC';font-size: 18px;font-weight: bold;color: crimson">江苏分数线</span>
              </el-col>
              <el-col :span="4" :offset="3" style="margin-top: 8px" >
                <el-dropdown @command="handleCommand" style="margin-top: 7px">
                  <span class="el-dropdown-link" style="font-family: 'PingFang SC';font-size: 16px">
                    {{ this.menuName }}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="lkLine">理科</el-dropdown-item>
                    <el-dropdown-item command="wkLine">文科</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
            <el-divider style="margin-left: 10px;margin-right: 10px"></el-divider>
            <el-row style="margin-bottom: 20px">
              <el-table
                  v-loading="tableLoading"
                  :data="universityLine"
                  style="width: 100%;margin-left: 50px;width: 1200px">
                <el-table-column
                    prop="univerId"
                    label="招生代码"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="classWl"
                    label="科类"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="year"
                    label="年份"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="rank"
                    label="批次"
                    width="150">
                </el-table-column>
                <el-table-column
                    prop="number"
                    label="录取数"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="highest"
                    label="最高分"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="lowest"
                    label="最低分"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="gap"
                    label="分差"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="numRanking"
                    label="位次"
                    width="150">
                </el-table-column>
              </el-table>
            </el-row>
          </el-row>
        </el-main>

      </el-container>
    </div>
  </div>

</template>
<style>
  ul{
    list-style-type: none
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 15px;
  }
</style>



<script>
export default {
  name: "uniDetail",
  created() {
    const loading=this.$loading({
      lock:true,
      text:loading,
      spinner:'el-icon-loading',
      background:'rgba(0,0,0,0.7)'
    })
    this.request.post("uniInfo/unidetail?universityName="+this.universityName).then(res => {
      if(res.code=='200'){
        this.universityInfo=res.result
      }else {
        this.$message.error(res.msg)
      }
      this.request.post("uniInfo/lkLine?universityName="+this.universityName).then(res => {
        if(res.code=='200'){
          this.universityLine=res.result
        }else {
          this.$message.error(res.msg)
        }

      })
    })
    setTimeout(()=>{
      loading.close()
    },1000)
    setTimeout(()=>{
      this.tableLoading=false
    },1500)

  },
  data(){
    return {
      universityName:this.$route.params.uN,
      universityInfo:{},
      universityLine:[],
      is211:false,
      is985:false,
      isExcellent:false,
      command:"lkLine",
      menuName:"理科",
      tableLoading:true
    }
  },
  mounted() {
    console.log(this.universityInfo)
  },
  methods:{
    load(){
      this.request.post("uniInfo/"+ this.command +"?universityName="+this.universityName).then(res => {
        if(res.code=='200'){
          this.universityLine=res.result
        }else {
          this.$message.error(res.msg)
        }
      })

    },
    handleCommand(command){
      this.tableLoading=true
      this.$forceUpdate()
      this.command=command
      if(command=="lkLine") this.menuName="理科"
      else this.menuName="文科"
      this.load()
      setTimeout(()=>{
        this.tableLoading=false
      },500)
    }
  }
}
</script>

